<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="" data-url="">
<img src="" data-url="">
<img src="" data-url="">
<script>
    const imgs = document.getElementsByTagName('img')
    let io = new IntersectionObserver((entries) => {
        entries.forEach((item) => {
            let oImg = item.target
            if (item.intersectionRatio > 0 && item.intersectionRatio <= 1) {
                oImg.setAttribute('src',oImg.getAttribute('data-url'))
                io.unobserve(item.target)
            }
        })
    })
    Array.from(imgs).forEach(item => {
        io.observe(item)
    })
</script>
</body>
</html>
